<template>
    <div class="wrapper">
        <!-- 如果是新用户走这里 -->
        <div style="margin-top: 200rpx;">
            <div>
                <div class="scan">
                    <img src="../../../static/bookstomoney/scan.png" alt="">
                    <div class="desc">
                        <p class="step1">STEP 01</p>
                        <p class="titles">扫描图书条码，下单</p>
                    </div>
                </div>
                <div class="scan">
                    <img src="../../../static/bookstomoney/postMan.png" alt="">
                    <div class="desc">
                        <p class="step1">STEP 02</p>
                        <p class="titles">等待快递上门，运费到付</p>
                    </div>
                </div>
                <div class="scan">
                    <img src="../../../static/bookstomoney/cash.png" alt="">
                    <div class="desc">
                        <p class="step1">STEP 03</p>
                        <p class="titles">审核通过后现金到账</p>
                    </div>
                </div>
                <p class='rule'>买卖图书规则，
                    <span class="click" @click="viewRule">请点击查看</span>
                </p>
                <div class="btns">
                    <span @click="scale">扫码卖书</span>
                    <span @click='secondType'>手动输入条码</span>
                </div>
            </div>
        </div>

        <alert-modal :showModal='showModal'></alert-modal>

        <div v-if='showInput'>
            <div id='mask'>
                <div class="modal-wrapper">
                    <div class="modal-title">
                        <h4>手动输入条码号</h4>
                        <i>X</i>
                    </div>
                    <div class="modal-content">
                        <img src="../../../static/bookstomoney/isbn.png" alt="">
                        <div class="isbn">
                            <i-input maxlength='13' :value="value" @change="handleInputChange" type="number" title="ISBN码" mode="normal" />
                        </div>
                        <p class="sureBtn" @click="search">确定</p>
                    </div>
                </div>
            </div>
        </div>
        <tabBarr current="sellbook" />
    </div>
</template>
<script>
import BooksExample from '../../components/booksExample/booksExample'
import alertModal from '../../components/alertModal/alertModal'
import tabBarr from '../../components/tabBar/tabBar'
export default {
    data() {
        return {
            isNewUser: false,
            showModal: false,
            value: '',
            showInput: false
        }
    },
    components: {
        BooksExample,
        alertModal,
        tabBarr
    },
    methods: {
        scale() {
            var _this = this
            wx.scanCode({
                onlyFromCamera: true,
                success(res) {
                    _this.showModal = false
                    console.log(res.result)
                    let result = res.result
                    _this.$http
                        .get('/sell/wx/book/info', { isnb: result })
                        .then(res => {
                            wx.setStorageSync('bookInfo', res.data)
                            if (res.data) {
                                wx.navigateTo({
                                    url: '../afterScanle/main'
                                })
                            } else {
                                _this.showModal = true
                            }
                        })
                },
                fail(res) {
                    _this.showModal = true
                }
            })
        },
        secondType() {
            this.showInput = true
        },
        onChange(detail) {
            console.log(detail)
        },
        viewRule() {
            wx.navigateTo({
                url: '../rule/main'
            })
        },
        handleInputChange(value) {
            this.value = value.target.detail.value
        },
        search() {
            var _this = this
            this.$http
                .get('/sell/wx/book/info', { isnb: this.value })
                .then(res => {
                    _this.showInput = false
                    _this.value = ''
                    if (res.data) {
                        wx.setStorageSync('bookInfo', res.data)
                        wx.navigateTo({
                            url: '../afterScanle/main'
                        })
                    } else {
                        wx.showToast({
                            title: '未找到相应书籍',
                            icon: 'none',
                            duration: 2000
                        })
                    }
                })
        }
    }
}
</script>
<style lang="scss" scoped>
#mask {
    width: 100%;
    height: 100%;
    position: fixed;
    left: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.7);
    z-index: 10000;
    .modal-wrapper {
        width: 578rpx;
        height: 548rpx;
        position: absolute;
        padding-top: 30rpx;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        background: #fff;
        .modal-title {
            h4 {
                font-size: 28rpx;
                color: #2b2b2b;
                width: 70%;
                text-align: center;
                height: 90rpx;
                line-height: 90rpx;
                margin-top: 30rpx;
                border-bottom: 1px solid #838383;
                margin: 0 auto;
            }
            i {
                position: absolute;
                font-size: 30rpx;
                color: #2b2b2b;
                right: 66rpx;
                top: 36rpx;
            }
        }
        .modal-content {
            padding-top: 20rpx;
            img {
                width: 234rpx;
                height: 160rpx;
                margin: 0 auto;
                display: block;
            }
            .isbn .i-cell {
                background: red !important;
            }
            .sureBtn {
                width: 50%;
                height: 70rpx;
                margin: 0 auto;
                background: #c78550;
                border-radius: 10rpx;
                line-height: 70rpx;
                text-align: center;
                margin-top: 44rpx;
                color: #fff;
                font-size: 32rpx;
            }
        }
    }
}
.scan {
    height: 100rpx;
    width: 65%;
    margin-left: 142rpx;

    margin-bottom: 60rpx;
    img {
        width: 88rpx;
        height: 88rpx;
        float: left;
        margin-right: 62rpx;
        box-sizing: border-box;
    }
    .desc {
        float: left;
        .step1 {
            color: #c78550;
            font-size: 36rpx;
            font-weight: bolder;
        }
        .titles {
            color: #2b2b2b;
            font-size: 28rpx;
        }
    }
}
.rule {
    width: 50%;
    text-align: center;
    height: 40rpx;
    margin: 0 auto;
    line-height: 40rpx;
    color: #2b2b2b;
    font-size: 28rpx;
    .click {
        color: #c78550;
        text-decoration: underline;
    }
}
.btns {
    display: flex;
    justify-content: space-between;
    width: 90%;
    margin: 0 auto;
    margin-top: 216rpx;
    span {
        font-size: 32rpx;
        color: #c78550;
        display: inline-block;
        width: 302rpx;
        height: 72rpx;
        line-height: 72rpx;
        text-align: center;
        border-radius: 10px;
        &:nth-child(1) {
            background: #c78550;
            color: #fff;
        }
        &:nth-child(2) {
            border: 1px solid #c78550;
            color: #c78550;
            height: 70rpx;
            width: 300rpx;
        }
    }
}
</style>

